import React, { useState } from 'react';
// 引入编辑器组件
import BraftEditor from 'braft-editor';
// 引入编辑器样式
import 'braft-editor/dist/index.css';
import { PictureOutlined } from '@ant-design/icons/lib';
import { ContentUtils } from 'braft-utils';
import { Upload, Button } from 'antd';

export default function RichEdit() {
  // 创建一个空的editorState作为初始值
  const [editorState, setEditorState] = useState(BraftEditor.createEditorState(null));
  // 编辑内容触发
  const handleChange = (editorState) => {
    setEditorState(editorState);
  };
  // 上传图片获取URL，此图片是上传（阿里云）之后拿地址放到编辑器内容里的
  const uploadHandler = (param) => {
    if (!param.file) {
      return false;
    }
    // simpleUpload(UPLOAD, param.file, (result) => {
    //   const { code, data } = result;
    //   if (code === 0) {
    //     setEditorState(
    //       ContentUtils.insertMedias(editorState, [
    //         {
    //           type: 'IMAGE',
    //           url: data.url,
    //         },
    //       ]),
    //     );
    //   }
    // });
  };
  const extendControls = [
    'bold',
    'italic',
    'underline',
    'text-color',
    'separator',
    'link',
    {
      key: 'antd-uploader',
      type: 'component',
      component: (
        <Upload accept="image/*" showUploadList={false} customRequest={uploadHandler}>
          <Button className="control-item button upload-button" data-title="插入图片">
            <PictureOutlined />
          </Button>
        </Upload>
      ),
    },
  ];

  return (
    <div style={{ border: '1px solid black' }}>
      <BraftEditor
        contentStyle={{ height: 305 }}
        value={editorState}
        excludeControls={['media', 'emoji']}
        extendControls={extendControls}
        onChange={handleChange}
      />
    </div>
  );
}
